<template>
  <div>
    <!-- 筛选头头 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-search"></i>
            筛选查询
            <div class="rightTop">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
              <el-button @click="Submit()">查询结果</el-button>
            </div>
          </el-header>
          <!-- 筛选条件 -->
          <div class="goodsrecycle-button-select-2" v-if="showSelect">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="活动名称:">
                <el-input
                  v-model="formInline.activityName"
                  placeholder="活动名称"
                  class="select-width-1"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-container>
      </el-main>
    </el-container>

    <!-- 数据列表 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            数据列表
            <div class="rightTop">
              <el-form :inline="true" :model="listLine" class="demo-form-inline">
                <el-button @click="addActi">添加活动</el-button>
                <el-button @click="periodTime">秒杀时间段列表</el-button>
                <el-form-item label style="padding-top: 6px">
                  <el-select v-model="listLine.row" placeholder="显示条数" class="select-width-2">
                    <el-option label="10条" value="10"></el-option>
                    <el-option label="20条" value="20"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label style="padding-top: 6px">
                  <el-select v-model="sort" placeholder="排序方式" class="select-width-2">
                    <el-option label="开始时间" value="0"></el-option>
                    <el-option label="结束时间" value="1"></el-option>
                    <el-option label="订单状态" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="id" label="编号">
                <template slot-scope="scope">{{scope.row.id}}</template>
              </el-table-column>
              <el-table-column prop="activityName" label="活动标题">
                <template slot-scope="scope">{{scope.row.activityName}}</template>
              </el-table-column>
              <el-table-column prop="activityStatus" label="活动状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.activityStatus == 1">活动准备中</span>
                  <span v-if="scope.row.activityStatus == 2">活动进行中</span>
                  <span v-if="scope.row.activityStatus == 3">活动已结束</span>
                </template>
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间">
                <template slot-scope="scope">{{scope.row.startTime}}</template>
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间">
                <template slot-scope="scope">{{scope.row.endTime}}</template>
              </el-table-column>
              <el-table-column prop="activityType" label="上线/下架" width="100">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.activityType" :active-value="1" :inactive-value="0"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button size="mini" @click="setGood(scope.$index, scope.row)" type="text">设置商品</el-button>
                  <el-button size="mini" @click="updateActi(scope.$index, scope.row)" type="text">编辑</el-button>
                  <el-button size="mini" @click="deleteOne(scope.$index, scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
    <div>
      <el-dialog title="添加活动" :close-on-click-modal="false" :visible.sync="dialogVisible">
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
          <el-form-item label="活动标题" prop="activityName">
            <el-input v-model="form.activityName"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <div class="dateCss">
              <el-date-picker
                v-model="form.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                align="center"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间">
            <div class="dateCss">
              <el-date-picker
                v-model="form.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                align="left"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="上架/下架">
            <el-radio v-model="form.activityType" :label="1">上线</el-radio>
            <el-radio v-model="form.activityType" :label="0">下架</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reform">取消</el-button>
            <el-button type="primary" @click="confirm(form)">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改活动" :close-on-click-modal="false" :visible.sync="dialogVisible1">
        <el-form :model="form1" :rules="rules" ref="form1" label-width="80px">
          <el-form-item label="活动标题" prop="activityName">
            <el-input v-model="form1.activityName"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <div class="dateCss">
              <el-date-picker
                v-model="form1.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                align="center"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间">
            <div class="dateCss">
              <el-date-picker
                v-model="form1.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                align="left"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="上架/下架">
            <el-radio v-model="form1.activityType" :label="1">上线</el-radio>
            <el-radio v-model="form1.activityType" :label="0">下架</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirm1(form)">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import secActivitiesApi from "@/api/operate/seckillActivities";
export default {
  data() {
    return {
      multipleSelection: [],
      // 分页
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage4: 1,
      sort: 0,

      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      //   shortcuts: [
      //     {
      //       text: "今天",
      //       onClick(picker) {
      //         picker.$emit("pick", new Date());
      //       }
      //     },
      //     {
      //       text: "昨天",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24);
      //         picker.$emit("pick", date);
      //       }
      //     },
      //     {
      //       text: "一周前",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //         picker.$emit("pick", date);
      //       }
      //     }
      //   ]
      // },
      dialogVisible: false,
      dialogVisible1:false,
      //开起筛选
      selectrue: true,

      showSelect: true,
      listLine: {
        row: "",
        sort: ""
      },
      formInline: {
        activityName: ""
      },
      rules: {
        actiTitle: [
          { required: true, message: "请输入活动标题", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        beginDate: [{}],
        endDate: [{}]
      },
      form: {
        activityName: "",
        startTime: "",
        endTime: "",
        activityType: ""
      },
      form1: {
        id: "",
        activityName:"",
        startTime: "",
        endTime: "",
        activityType: ""
      },
      tableData: []
    };
  },
  watch: {
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      if (this.selectrue == true) {
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          val,
          this.formInline.activityName
        );
      } else {
        this.inData(this.currentPage4, this.pageSize, val);
      }
    }
  },
  methods: {
    // dateFormat(row,column){
    //   let data=row[column.property]
    //   if(data==null){
    //     return null
    //   }
    //   let dt=new Date(data)
    //   return dt.getFullYear()+'-'+(dt.getMonth()+1)+'-'+dt.getDay()
    // },

    // init(id) {
    //   this.form.id = id || 0;
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {});
    // },
    packUp() {
      this.showSelect = !this.showSelect;
      console.log("submit!");
    },
    Submit() {
      console.log(this.formInline);
      this.inDataTwo(
        this.currentPage4,
        this.pageSize,
        this.sort,
        this.formInline.activityName
      );
    },
    addActi() {
      this.dialogVisible=true;
    },
    updateActi(index, row) {
      console.log(row);
      this.form1.id=row.id;
      this.form1.activityName=row.activityName;
      this.form1.startTime=row.startTime;
      this.form1.endTime=row.endTime;
      this.form1.activityType=row.activityType;
      this.dialogVisible1=true
    },

    //关闭清空
    reform(){
      this.form.activityName=null;
      this.form.startTime=null;
      this.form.endTime=null;
      this.form.activityType=null;
      this.dialogVisible=false
    },
    //软删除
    deleteOne(index, row) {
      var id=row.id;
      this.$confirm("确认删除" , "提示", {
        type: "warning"
      }).then(() => {
        secActivitiesApi.getDelActivityList(id).then(Response =>{
          const rea=Response.data;
        console.log(Response);
        if(rea.code==200){
          this.inData(this.currentPage4, this.pageSize, this.sort);
        }else{
          this.$message({
            message:rea.message,
            type:"warning"
          });
        }
        })
      });
    },
    periodTime() {
      this.$router.push("/operation/periodTime");
    },
    //添加保存
    confirm(form){
      console.log(this.form.startTime)
      var dto={"activityName":this.form.activityName,"startTime":this.form.startTime,"endTime":this.form.endTime,"activityType":this.form.activityType};
      secActivitiesApi.getAddActivityList(dto).then(Response =>{
        const reas=Response.data;
        console.log(Response.data)
        if(reas.code==200){
          this.dialogVisible=false;
          this.inData(this.currentPage4, this.pageSize, this.sort);
        }else{
          this.$message({
            message:reas.message,
            type:"warning"
          });
        }
      })
    },

    //编辑修改
    confirm1(form1){
      var dto={"id":this.form1.id,"activityName":this.form1.activityName,"startTime":this.form1.startTime,"endTime":this.form1.endTime,"activityType":this.form1.activityType};
      secActivitiesApi.getUpdateActivityList(dto).then(Response =>{
        const reas=Response.data;
        if(reas.code==200){
          this.dialogVisible1=false;
          this.inData(this.currentPage4, this.pageSize, this.sort);
        }else{
          this.$message({
            message:reas.message,
            type:"warning"
          });
        }
      })
    },
    
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      if (this.selectrue == true) {
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.activityName
        );
      } else {
        this.inData(this.currentPage4, this.pageSize, this.sort);
      }
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${val}`);
      if (this.selectrue == true) {
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.activityName
        );
      } else {
        this.inData(this.currentPage4, this.pageSize, this.sort);
      }
    },
    inData(pageNum, pageSize, sort) {
      secActivitiesApi.getFindPages(pageNum, pageSize, sort).then(Response => {
        console.log(Response);
        this.tableData = Response.data.data.list;
        this.total = Response.data.data.total;
      });
    },

    inDataTwo(pageNum, pageSize, sort, activityName) {
      if (activityName != null) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log(activityName);
      secActivitiesApi
        .getFindAllPages(pageNum, pageSize, sort, activityName)
        .then(Response => {
          this.tableData = Response.data.data.list;
          this.total = Response.data.data.total;
        });
    },
    // onSubmit(formInline) {
    //   this.$refs[formInline].validate(valid => {
    //     if (valid) {
    //       alert("submit!")
    //       this.visible = false
    //     } else {
    //       console.log("error submit!!")
    //       return false
    //     }
    //   })
    // },
    topSelect() {
      console.log("submit!");
      this.dialogVisible = true;
    },
    setGood() {
      this.$router.push("/operation/setGood");
    }
  },
  mounted() {
    this.inData(this.currentPage4, this.pageSize, this.sort);
  }
};
</script>
<style scoped>
.rightTop {
  float: right;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 150px;
}
.centerTag {
  text-align: center;
}
.dateCss {
  float: left;
}
</style>
